function itGraph(width, height, paper){
	this.paper = paper;
	this.data;
	this.graph;
	this.axises;
	this.width = width;
	this.height = height;
	
	this.background = new itGraphBackground(width, height, this.paper);
	this.graph = new itBarGraph(width, height, this.paper);
}

itGraph.prototype.ClearGraph = function(){
    this.paper.clear();
}

itGraph.prototype.SetPaper = function(paper){
	this.paper = paper;
}

itGraph.prototype.ChangeData = function(data){
	//Need to call change-data-function for graph & for axises
	
}

itGraph.prototype.SetWidth = function (width){
	this.width = width;
}

itGraph.prototype.SetHeight = function (height){
	this.height = height;
}


/* GRAPH */

function itBarGraph(width, height, paper){
	this.x = 0.1 * width / 2;
	this.y = 0.1 * height / 2;
	this.height = 0.9 * height;
	this.width = 0.9 * width;
	this.data = null;
	this.paper = paper;
	this.chart = null;
	this.animationSpeed = 1000;
	this.popupY = this.height/2;
}

itBarGraph.prototype.SetX = function(x){
	this.x = x;
}

itBarGraph.prototype.SetY = function(y){
	this.y = y;
}

itBarGraph.prototype.SetHeight = function(height){
	this.height = height;
}

itBarGraph.prototype.SetWidth = function(width){
	this.width = width;
}

itBarGraph.prototype.SetAnimationSpeed = function(animationSpeed){
	this.animationSpeed = animationSpeed;
}

itBarGraph.prototype.SetPaper = function(paper){
	this.paper = paper;
}

itBarGraph.prototype.SetData = function(data){
	//Random animation
	this.data = data;
	//draw graph
	
	/*var rect = this.paper.rect (this.x, this.y-20, this.width, this.height+20, 5);
	
	rect.attr({fill:"#fff", opacity: "0.2"});
	*/
	fin = function(r, bar, w, h) {
		var calculateOffset = function(width, x){
			return Math.round(-1*0.8*(x-(width/2)));
		};
		
		this.rect = r.rect(calculateOffset(w, bar.x)+bar.x-50, h, 100, 100, 4);
		this.rect.attr({fill:"#fff", opacity:"0.1"});
		this.rect.animate({fill:"#fff", opacity: "0.4"},300);
		
		this.flag = r.text(calculateOffset(w, bar.x)+bar.x, h+45, bar.value);
		this.flag.attr({"font-size":30});
	}
	
	fout = function(r){
		this.rect.remove();
		this.flag.remove();
	}
	var that = this;
	
	this.chart = this.paper.barchart(this.x, this.y, this.width, this.height, this.data).hover(
		function(){
			
			fin(this.paper, this.bar, that.width, that.popupY);
		}, 
		function(){
			fout(this.paper);
		}
	);
    
	//console.log(this.width);
	//axis = Raphael.g.axis(this.x+40, this.y + this.height, this.width-40, this.x, this.x + this.width,8,2,["Today", "Yesterday", "Tomorrow", "Future", "peti", "sesti", "sedmi", "osmi"], "|", 50, this.paper)

}

itBarGraph.prototype.ChangeData = function(data2){
	data2=JSON.parse(JSON.stringify(data2));
	
	var c2 = this.paper.barchart( this.x, this.y, this.width, this.height, data2);
	
	
	$.each(this.chart.bars, function(k1, v1) {
	
		$.each(this, function(k, v){
			v.animate(
				{
					path: c2.bars[k1][k].attr("path")
				},
				1000
			);
			v.value = data2[k1][k];
		
		});
	});
	
	c2.remove();
}

/* BACKGROUND */
function itGraphBackground(width, height, paper){
	this.paper = paper;
	this.height = height;
	this.width = width;
	this.borderRadius = 10;
	this.opacity = 0.2;
	this.color = "#fff";
	this.rect = null;
	
	this.DrawBackground();
}

itGraphBackground.prototype.DrawBackground = function(){
	this.rect = this.paper.rect ( 0 , 0, this.width, this.height, this.borderRadius);
	
	this.SetFill();
}

itGraphBackground.prototype.SetColor = function (color){
	this.color = color;
	this.SetFill()
}

itGraphBackground.prototype.SetOpacity = function (opacity){
	this.opacity = opacity;
	this.SetFill();
}

itGraphBackground.prototype.SetFill = function (){
	this.rect.attr({fill:this.color, opacity: this.opacity});
}

/* AXISES */

/* PAPER */